<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue'
import Loading from '@/components/loading/index.vue'
import Left from "@/views/index/left.vue";
import Right from "@/views/index/right.vue";
import Center from "@/views/index/center.vue";
import {useAnStore} from "@/stores";
import {getCount} from "@/api";

const isLoading = ref(false)
const anStore  = useAnStore()
const timer2 = ref()
const data = ref()

const getData = async () => {
  const res = await getCount()
  data.value = res.data
}
onMounted(()=>{
  getData()
  anStore.start()
  if(timer2.value) clearInterval(timer2.value)
  timer2.value = setInterval(()=>{
    getData()
  },5000)
})
onUnmounted(()=>{
  if(timer2.value) clearInterval(timer2.value)
})
</script>

<template>
  <div>
    <div class="index-box h-[1080px] pt-[67px] pl-[31px] pr-[31px] overflow-hidden">
      <div class="contetn_left">
        <left :item="data"/>
      </div>
      <div class="contetn_center relative overflow-hidden">
        <center :item="data"/>
      </div>
      <div class="contetn_right">
        <right :item="data"/>
      </div>
    </div>
    <Transition name="slide-fade">
      <loading v-if="isLoading"/>
    </Transition>
  </div>
</template>

<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  //min-height: calc(100% - 93px);
  justify-content: space-between;
}
//左边 右边 结构一样
.contetn_left,
.contetn_right {
  position: relative;
  z-index: 9;
  box-sizing: border-box;
}
.contetn_center {
  flex: 1;
  //margin: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
